<template>
	<view class="content" :style="computedBackgroundStyle">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<!--展开导航-->
		<view class="nav">
			<view style="width: 72rpx;" @click="goBack">
				<image 
					style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" 
					src="/static/images/icon/left-icon-white.svg"
				></image>
			</view>
			<view class="nav-header">
				<view class="nav-tools">
					<view class="nav-item" @click="showReport=true">
						<u-image
							src="/static/images/icon/waring.svg"
							width="46rpx"
							height="46rpx"
						></u-image>
					</view>
					<view class="nav-item" @click="showShare">
						<u-image
							src="/static/images/icon/share-white.png"
							width="46rpx"
							height="46rpx"
						></u-image>
					</view>
				</view>
			</view>
		</view>
		<!--展开导航结束-->
		
		<!-- 用戶信息 -->
		<view class="content-user">
			
			<view class="user-base">
				<view class="user-base-avatar">
					<u-avatar :src="user_info.avatar" shape="circle" :size="156"></u-avatar>
				</view>
				<view class="user-base-info">
					<view class="user-base-header" style="display: flex;justify-content: flex-start;align-items: center;">
						<view class="user-base-title" style="color: #232426;font-size: 40rpx;font-weight: 600;">{{user_info.nickname}}</view>
						<view style="margin-left:12rpx;">
							<u-image
								src="/static/images/icon/cert.svg"
								width="36rpx"
								height="36rpx"
							></u-image>
						</view>
						<view class="user-base-badge" style="margin-left: 12rpx;display: flex;justify-self: center;background-color: #FFF0D8;color: #F67914;font-size: 22rpx;padding: 4rpx 14rpx 4rpx 18rpx;border-radius: 52rpx;height: 38rpx;line-height: 38rpx;align-items: center;">
							<view>熱門之星</view>
							<image
								src="/static/images/icon/fire.png"
								style="margin:0;width:26rpx;height: 26rpx;"
							></image>
						</view>
					</view>
					<view class="user-base-list">
						<view class="user-base-item" @click="goMyFocus">
							<view class="user-base-item-value">0</view>
							<view class="user-base-item-title">追蹤</view>
						</view>
						<view class="user-base-item" @click="goMyFans">
							<view class="user-base-item-value">{{user_info.fans}}</view>
							<view class="user-base-item-title">粉絲</view>
						</view>
						<view class="user-base-item" @click="goMyRate">
							<view class="user-base-item-value">{{user_info.rate}}</view>
							<view class="user-base-item-title">評價</view>
						</view>
					</view>
				</view>
			</view>
			<view class="user-topic">
				<view class="user-topic-content">
					{{user_info.bio}}
				</view>
			</view>
			<view class="user-tags">
				<view v-if="user_info.sex==2" class="user-tags-item-lady">
					<view>
						<u-image
							src="/static/images/icon/lady.svg"
							width="28rpx"
							height="28rpx"
						></u-image>
					</view>
					<view>{{user_info.age}}&nbsp;歲</view>
				</view>
				<view v-if="user_info.sex==1" class="user-tags-item-male">
					<view>
						<u-image
							src="/static/images/icon/male.svg"
							width="28rpx"
							height="28rpx"
						></u-image>
					</view>
					<view>{{user_info.age}}&nbsp;歲</view>
				</view>
				<view class="user-tags-item">
					{{user_info.address}}
				</view>
				<view v-if="tagList.length > 0" v-for="(item,index) in tagList" :key="index" class="user-tags-item">
					{{item}}
				</view>
			</view>
			<view class="user-base-number">
				<view class="user-base-number-value">ORID：{{user_info.orid}}</view>
			</view>
			<view class="user-base-tools">
				<view class="user-tools-btn user-tools-btn-default" @click="chat">
					<image src="/static/images/icon/message.png" style="width: 28rpx;height: 28rpx;margin-right: 12rpx;"></image>
					<view>私訊</view>
				</view>
				<view v-if="!user_info.is_focus" class="user-tools-btn user-tools-btn-active" @click="focus">
					<image src="/static/images/icon/my-focus.png" style="width: 28rpx;height: 28rpx;margin-right: 12rpx;"></image>
					<view>追蹤</view>
				</view>
				<view v-else class="user-tools-btn user-tools-btn-default" style="background-color: rgb(242,242,242);" @click="focus">
					<image src="/static/images/icon/my.png" style="width: 28rpx;height: 28rpx;margin-right: 12rpx;"></image>
					<view>已追蹤</view>
				</view>
			</view>
			
		</view>
		<!-- 用戶信息結束 -->
		
		<!--内容-->
		<view class="content-body" >
			<view class="body-menu-list">
				<view :class="{'body-menu-item-active':current==3,'body-menu-item':current!=3}" @click="changeType(3)">
					貼文
				</view>
				<view :class="{'body-menu-item-active':current==1,'body-menu-item':current!=1}" @click="changeType(1)">
					達人
				</view>
				<view :class="{'body-menu-item-active':current==2,'body-menu-item':current!=2}" @click="changeType(2)">
					任務
				</view>
			</view>
			<!--吸頂Tools-->
			<view v-if="showNav" style="position: fixed;top: 0;z-index: 99;background: #fff;padding-bottom: 15rpx;box-sizing: border-box;width: 100%;padding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);">
				<view class="body-menu-list">
					<view :class="{'body-menu-item-active':current==3,'body-menu-item':current!=3}" @click="changeType(3)">
						貼文
					</view>
					<view :class="{'body-menu-item-active':current==1,'body-menu-item':current!=1}" @click="changeType(1)">
						達人
					</view>
					<view :class="{'body-menu-item-active':current==2,'body-menu-item':current!=2}" @click="changeType(2)">
						任務
					</view>
				</view>
			</view>
			<!--吸頂Tools結束-->
			
			<view class="body-content">
				<!-- <view class="body-card" v-for="(item,index) in data_list" :key="index">
					<view class="card-cover">
						<u-image
							:src="item.cover"
							radius="16rpx 16rpx 0 0"
							width="345rpx"
							height="432rpx"
						></u-image>
					</view>
					<view class="card-body">
						<view class="card-title">
							{{item.title}}
						</view>
					</view>
					<view class="card-footer">
						<view class="card-footer-avatar">
							<view class="card-avatar-image">
								<u-image
									:src="item.avatar"
									height="32rpx"
									width="32rpx"
									shape="circle"
								></u-image>
							</view>
							<view class="card-footer-name">{{item.nickname}}</view>
						</view>
						<view class="card-footer-likes" v-if="item.is_like == 1">
							<view class="card-footer-likes-images">
								<u-image
									src="/static/images/icon/likes_active.png"
									height="32rpx"
									width="32rpx"
								></u-image>
							</view>
							<view class="card-likes-item-active">
								{{item.likes}}
							</view>
						</view>
						<view class="card-footer-likes" v-else>
							<view class="card-footer-likes-images">
								<u-image
									src="/static/images/icon/likes.png"
									height="32rpx"
									width="32rpx"
								></u-image>
							</view>
							<view class="card-likes-item">
								{{item.likes}}
							</view>
						</view>
					</view>
				</view> -->
				<card-list :listData="data_list" :type="contentType"></card-list>
				<view style="width: 100%;height: 800rpx;margin: 0 auto;text-align: center;padding-top: 120rpx;" v-if="data_list.length == 0">
					<view style="color: #BEC0C5;font-size: 24rpx;">目前沒有東西</view>
				</view>
			</view>
		</view>
		<!--内容结束-->
		<!-- 檢舉組件 -->
		<report-popup
			:show="showReport"
			:targetId="targetUserId"
			:targetType="'user'"
			@close="showReport = false"
		></report-popup>
		<share-popup ref="sharePopup" ></share-popup>
	</view>
</template>

<script>
	import uEmpty from '@/uni_modules/uview-ui/components/u-empty/u-empty.vue';
	import uAvatar from '@/uni_modules/uview-ui/components/u-avatar/u-avatar.vue';
	import { myIndexList, getUserInformation, fansUser, createChat, focusTo } from '@/config/api.js';
	import cardList from '@/components/card-list.vue'
	import ReportPopup from '@/components/report-popup.vue'
	import sharePopup from '@/components/share-popup.vue';
	
	export default {
		data() {
			return {
				uid:0,
				type:1,
				bgImage:'',
				msgNum:0,
				noticeNum:0,
				data_list:[],
				page:1,
				tagList:[],
				max_page:0,
				city_name:'',
				current:1,
				user_info:{},
				num:0,
				scrollTop:0,
				hideThreshold:395,
				showNav:false,
				contentType:'task',
				showReport: false,
				targetUserId: '123456' // 被檢舉用戶的ID
			}
		},
		components: {
			uEmpty,uAvatar,cardList,ReportPopup,sharePopup
		},
		computed:{
			computedBackgroundStyle(){
				return {
					backgroundImage: this.bgImage 
						? `url(${this.bgImage})` 
					    : 'linear-gradient(180deg, rgba(59, 59, 59, 0.5) -10%, rgba(59, 59, 59, 0) 40%)',
							backgroundSize: 'contain',
						    backgroundRepeat: 'no-repeat'
				}
			}
		},
		onReachBottom(){
			if( this.page <= this.max_page ){
				uni.showLoading({
					icon:'none',
					title:'請求中'
				})
				this.getData();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			console.log(this.scrollTop)
			if(this.scrollTop > this.hideThreshold){
				this.showNav = true;
			} else {
				this.showNav = false;
			}
		},
		onLoad(option) {
			// let userId = uni.getStorageSync('userId');
			this.uid = option.uid;
			this.getUserInfo();
			this.getData();
		},
		onShow(){
			
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			getUserInfo(){
				
				let that = this;
				let data = {
					id:this.uid,
				}
				
				getUserInformation({data:data}).then((res) => {
					//success
					console.log(res)
					that.user_info = res;
					that.bgImage = res.background;
					
					if( res.job ){
						that.tagList = res.job.split(',');
					}
					
					console.log(that.user_info.is_focus)
				}).catch(() =>{
					
				})
			},
			//加載數據
			getData(){
				let that = this;
				let data = {
					uid:this.uid,
					page:this.page,
					type:this.current,//1達人,2任務,3社群,4點讚,5收藏
				}
				myIndexList(data).then((res) => {
					//success
					console.log(res.data)
					that.data_list = that.data_list.concat(res.data);
					that.max_page = res.total_pages;
					that.num = res.total;
					that.page++;
					uni.hideLoading();
				}).catch(() =>{
					
				})
			},
			changeType(id){
				this.current = id;
				if(id == 1){
					this.contentType = 'task';
				} else if(id == 2){
					this.contentType = 'recruit';
				} else {
					this.contentType = 'colony';
				}
				
				this.data_list = [];
				this.page = 1;
				this.getData();
			},
			goMyFocus(){
				uni.navigateTo({
					url:'/pages/my/fans?type=focus'
				})
			},
			goMyFans(){
				uni.navigateTo({
					url:'/pages/my/fans?type=fans'
				})
			},
			goMyRate(){
				uni.navigateTo({
					url:'/pages/my/rate'
				})
			},
			chat(){
				if( this.usedLogin() ){
					
					let that = this;
					let data = {
						category:'community',
						target_user_id:this.uid
					}
					createChat(data).then((res) => {
						//success
						console.log(res)
						uni.navigateTo({
							url: '/pages/my/chatTalk?roomId='+res.id,
							success: res => {},
							fail: () => {},
							complete: (res) => {
								console.log(res)
							}
						});
						
					}).catch(() =>{
						
					})
				}
			},
			focus(){
				let that = this;
				let data = {
					uid:this.uid
				}
				focusTo(data).then((res) => {
					//success
					console.log(res)
					let title = res == 1?'追蹤成功':'取消追蹤';
					that.user_info.is_focus = res == 1?true:false
					uni.showToast({
						icon:'none',
						title:title
					})
					
				}).catch(() =>{
					
				})
			},
			usedLogin(){
				console.log(this.userid)
				if(this.userid == 0){
					uni.showToast({
						title: "請先登錄",
						icon:'none',
						success: (res) => {
							
						},
						fail: (res) => {
							
						},
					})
					
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/login',
							success: res => {},
							fail: () => {},
							complete: (res) => {
								console.log(res)
							}
						});
					}, 1500);
					
					
					return false;
				}
				return true;
			},
			//檢舉使用者
			Report(){
				this.showReport = true;
				this.showTools = false;
			},
			showShare(){
				this.$refs.sharePopup.show();
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		font-family: PingFang TC, PingFang TC;
		background-size: contain;
		background-repeat: no-repeat;
		width: 100%;
		min-height: 274rpx;
	}
	.nav{
		width: 100%;
		margin-top: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		
		.nav-header{
			display: flex;
			justify-content: flex-end;
			padding: 0 32rpx;
			
			.nav-tools{
				display: flex;
				justify-content: space-between;
				margin-left: 16rpx;
				.nav-item{
					position: relative;
					display: inline-block;
					margin: 0 10rpx;
					padding: 15rpx 0;
					.nav-item-badge{
						position: absolute;
						top: 0px; /* 根据需要调整 */
						right: -10rpx; /* 根据需要调整 */
						background-color: #FF3D43;
						color: white;
						border-radius: 50%; /* 圆形 */
						width: 40rpx; /* 根据需要调整 */
						height: 40rpx; /* 根据需要调整 */
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 22rpx; /* 根据需要调整 */
					}
				}
			}
		}
		.nav-banner{
			margin: 40rpx auto 0;
			width: 682rpx;
		}
	}
	.content-user{
		width: 100%;
		box-sizing: border-box;
		border-radius: 50rpx 50rpx 0 0;
		background-color: #FFF;
		margin-top: 98rpx;
		padding-bottom: 40rpx;
		
		.user-base{
			width: 100%;
			margin: 0 auto;
			padding: 40rpx 48rpx 0;
			display: flex;
			justify-content: flex-start;
			box-sizing: border-box;
			
			.user-base-avatar{
				width: 156rpx;
				height: 156rpx;
				
				.user-base-avatar image{
					border-radius: 50%;
				}
			}
			.user-base-info{
				margin-left: 48rpx;
				min-width: 480rpx;
				
				.user-base-header{
					display: flex;
					justify-content: flex-start;
					
					
					.user-base-title{
						color: #232426;
						font-size: 40rpx;
						
					}
					
					.user-base-badge{
						margin-left: 24rpx;
						display: flex;
						justify-self: center;
						background-color: #FFF0D8;
						color: #F67914;
						font-size: 22rpx;
						padding: 4rpx 16rpx;
						border-radius: 52rpx;
						height: 38rpx;
						line-height: 38rpx;
						align-items: center;
					}
				}
				.user-base-list{
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding-right:100rpx;
					
					.user-base-item{
						text-align: left;
						margin-top: 20rpx;
						
						.user-base-item-title{
							color: #BEC0C5;
							font-size: 22rpx;
						}
						.user-base-item-value{
							color: #232426;
							font-size: 32rpx;
							font-weight: 600;
						}
					}
				}
			}
		}
		.user-topic{
			margin-top: 48rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx;
			
			.user-topic-content{
				color: #808690;
				font-size: 28rpx;
			}
		}
		.user-tags{
			margin-top: 28rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx;
			display: flex;
			justify-content: flex-start;
			
			.user-tags-item{
				font-size: 22rpx;
				color: #6A707C;
				background-color: #F0F0F0;
				padding:4rpx 10rpx;
				border-radius: 12rpx;
				margin-right: 16rpx;
			}
			.user-tags-item-male{
				font-size: 22rpx;
				color: #51A2CC;
				background-color: #EDF5FF;
				padding:4rpx 10rpx;
				border-radius: 12rpx;
				margin-right: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.user-tags-item-lady{
				font-size: 22rpx;
				color: #E66CAB;
				background-color: #FFEDF7;
				padding:4rpx 10rpx;
				border-radius: 12rpx;
				margin-right: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.user-base-number{
			margin-top: 24rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx;
			
			.user-base-number-value{
				font-size: 24rpx;
				color: #808690;
				font-family: 500;
			}
		}
		.user-base-tools{
			margin-top: 36rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx;
			display: flex;
			justify-content: space-between;
			
			.user-tools-btn{
				display: flex;
				justify-content: center;
				border-radius: 200rpx;
				font-size: 28rpx;
				width: 310rpx;
				height: 68rpx;
				line-height: 68rpx;
				align-items: center;
			}
			
			.user-tools-btn-default{
				border: 2rpx solid #E5E6E8;
				color: #232426;
				width: 50%;
				margin-right: 4rpx;
			}
			.user-tools-btn-active{
				border: 2rpx solid #27C5D6;
				color: #27C5D6;
				width: 50%;
				margin-left: 4rpx;
			}
		}
	}
	
	.content-body{
		width: 100%;
		margin-top: 20rpx;
		background: #FFF;
		
		.body-nav{
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			color: #808690;
			font-weight: 500;
			padding: 32rpx 36rpx;
			box-sizing: border-box;
			.body-nav-list{
				display: flex;
				justify-content: space-between;
				.body-nav-item{
					margin: 0 64rpx 0 0;
				}
				.avtive{
					font-weight: 600;
					color: #232426;
				}
			}
		}
		.body-menu-list{
			width: 100%;
			display: flex;
			justify-content: space-around;
			padding: 32rpx 32rpx 0;
			box-sizing: border-box;
			border-bottom: 2rpx solid #F6F8FA;
			
			.body-menu-item{
				color: #808690;
				padding: 0;
				font-size: 28rpx;
				width: 58rpx;
				text-align: center;
			}
			.body-menu-item-active{
				padding-bottom: 12rpx;
				font-size: 28rpx;
				color: #232426;
				border-bottom: 5rpx solid #232426;
				font-weight: 500;
				width: 58rpx;
				text-align: center;
			}
		}
		.body-content{
			margin-top: 32rpx;
			padding:0 23rpx;
			background-color: #FFF;
			min-height: 980rpx;
			
			.body-bottom{
				text-align: center;
				padding: 56rpx 0;
				width: 100%;
				
				.text{
					color: #BEC0C5;
					font-size: 28rpx;
				}
			}
		}
	}
	
	.slot-icon{
		width: 50rpx;
		height: 50rpx;
	}
	.plus-icon{
		width: 48rpx;
		height: 48rpx;
		background-color: #27C5D6;
		padding: 22rpx;
		border-radius: 50%;
		margin-top: 10rpx;
	}
	.indicator{
		justify-content: center;
		@include flex(row);
		
		&__dot {
			height: 8rpx;
			width: 32rpx;
			border-radius: 4rpx;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 6px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}
	::-webkit-scrollbar {
	  display: none !important; /* 隐藏滚动条 */
	  width: 0 !important;
	  height: 0 !important;
	  -webkit-appearance: none;
	  background: transparent;
	}
	.fifter-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #E5E6E8;
		padding: 12rpx 24rpx;
		border-radius: 12rpx;
		margin-left: 8rpx;
		
		.fifter-title{
			margin-left: 12rpx;
			font-size: 28rpx;
		}
	}
	
</style>
